<template>
    <view class="big">
        <view class="title">
            {{ customerName }}欠款页面
        </view>
     <scroll-view scroll-y="true"  :style="{height: contentHeight + 'px'}" @scrolltolower="queryData" class="center">
        <view v-for="(item,index) in datelist" :key="index" class="bgc">
            <view class="flex j-content-between pd one">
                <text>单据编码</text>
                <text>单据类型</text>
            </view>
            <view class="flex j-content-between pd two bold">
                <view>{{ item.code }}</view>
                <view>{{ getorderType(item.orderType) }}</view>
            </view>
            <view class="flex j-content-between pd">
                <view>日期：{{ item.busDate }}</view>
                <view class="bold">单据金额：￥{{ item.unCancelAmount }}</view>
            </view>
        </view>
        <end-temp v-show="end"></end-temp>
     </scroll-view>
     </view>
</template>

<script>
import { debtList,newdebtList } from "../../service/api/debtList";
import { getScreen} from "../../service/auth";
import endTemp from "../../components/endTemp";
export default {
name:'debtList',
components:{endTemp},
data() {
    return {
        contentHeight:0,
        end:false,
        size:20,
        page:1,
        customerId:'',
        customerName:'',
        datelist:[],
        orderType:{
            '1':'销售订单',
            '2':'销售退货',
            '3':'回瓶回箱',
            '4':'销售费用',
            '5':'代垫费用'
        },
        visit:''
    }
},
onLoad(option){
    const app = getApp()
    if(option.customerId==app.globalData.customer.id){
        this.customerName=app.globalData.customer.name
    }
    console.log('jjjjjjjjjjj',app)
    this.customerId=option.customerId
    this.visit=option.visit
    this.onGet()
},
created() {
    const {width,height} = getScreen()
    this.contentHeight = height - (0 * width / 750)
  },
methods: {
    getorderType(e){
        return this.orderType[e] 
    },
    onGet(){
        const data={
            customerId:this.customerId,
            size:this.size,
            page:this.page
        }
        if (this.visit) {
            newdebtList(data).then(res=>{
        if (res.data.content.length < this.size)
            this.end=true
            this.datelist=this.datelist.concat(res.data.content)
            console.log('kkkkkk',res.data.content.length,this.size)
        })
        }else{
            debtList(data).then(res=>{
        if (res.data.content.length < this.size)
            this.end=true
            this.datelist=this.datelist.concat(res.data.content)
            console.log('kkkkkk',res.data.content.length,this.size)
        })
        }
        
    },
    queryData(){
    if(this.end)return
      this.page++
      this.onGet()
    }
},
}
</script>

<style lang="scss" scoped>
 .big{
    background-color: #f6f7f7;
    position: relative;
  .title{
    line-height: 100rpx;
    font-size: 40rpx;
    font-weight: bold;
    position: fixed;
    z-index: 999;
    background-color: white;
    width: 100%;
    padding: 0 20rpx;
}
.center{
    height: 603px;
    top: 100rpx;
    position: relative;
    .bgc{
    background-color: white;
    margin: 15rpx;
    border-radius: 20rpx;
    .pd {
    padding: 15rpx 20rpx;
    color: grey;
	}
    .one{
        font-size: 26rpx;
    }
    .two{
    margin: 0rpx 0 10rpx;
    border-bottom: 1rpx solid #f3eded;
    font-size: 35rpx;
    }
    .three{
        font-size: 28rpx;
    }
    .bold{
        font-weight: bold;
        color: black;
    }
  }
}
  
}
</style>